<template>
  <div class="page">
    <div class="content">
      <div class="top"></div>
      <div class="cont">
        <div class="from-cont">
          <div id="form-demo" role="form">
            <div class="dt-desc">
              <div class="dt-desc-left">
                <span class="iconfont dt-icon icon-icon_service"></span>
              </div>
              <div class="dt-desc-right">
                <p class="dt-desc-title">订单查询</p>
                <p class="dt-desc-sm">客户自主查询</p>
              </div>
            </div>
            <div class="dt-suc-title shadow-lg">
              <div class="dt-suc_cont">
                <div class="dt-form shadow-lg">
                  <van-form
                    ref="form"
                    @submit="onSubmit"
                    @failed="onFailed"
                    :show-error-message="false"
                    class="form"
                  >
                    <div class="form-item">
                      <van-field
                        v-model.trim="keyword"
                        left-icon="search"
                        placeholder="商户单号或预留手机号"
                        maxlength="30"
                        :rules="rule"
                        :border="false"
                      />
                    </div>
                  </van-form>
                  <van-button
                    type="primary"
                    round
                    class="shadow-lg submit"
                    @click="submit"
                    :loading="submiting"
                  >
                    提交
                  </van-button>
                  <div class="dt-form-row" style="margin-top: 25px">
                    <div
                      class="dt-form-row-cont form-group"
                      style="color: rgba(0, 0, 0, 0.45)"
                    >
                      如果您已支付成功，未添加排店老师，请您提供<span
                        style="color: rgba(0, 0, 0, 0.85)"
                        >“商户单号或预留手机号”</span
                      >进行查询，查询成功后为您安排排店老师
                      <p style="margin-top: 10px">
                        “商户单号”查看方法：打开微信-搜索“微信支付”-找到这一笔的交易记录-查看账单详情-商户单号，如下图示例：
                      </p>
                    </div>
                    <p style="margin-top: 10px">
                      <img src="@/assets/image/order.jpg" style="width: 100%" />
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { enNum } from "@/utils/pattern";
import qs from "qs";
import { clickIdKeys } from "@/config";

export default {
  metaInfo() {
    return {
      title: "订单查询",
    };
  },
  data() {
    return {
      submiting: false,
      keyword: "",
      rule: [
        { required: true, message: "请输入商户单号或预留手机号" },
        { pattern: enNum, message: "请输入字母或数字" },
        {
          validator: (value) => value.length > 10,
          message: "商户单号或预留手机号的长度不低于11位",
        },
      ],
    };
  },
  methods: {
    submit() {
      this.$refs.form.submit();
    },
    // 表单错误
    onFailed({ errors }) {
      this.$toast({
        message: errors[0].message,
        // position: "top",
      });
    },

    async onSubmit() {
      let form = {
        content: this.keyword,
      };
      this.submiting = true;

      const res = await this.$api.geturlparam(form).catch((err) => {
        this.$toast(err);
        this.submiting = false;
        throw err;
      });
      this.$toast.clear(true);
      let params = qs.parse(res);
      let query = {
        ...params,
        merOrderId: params.order_id,
      };
      this.$delete(query, "mpToken");
      clickIdKeys.forEach((k) => {
        this.$delete(query, k);
      });
      this.$router.push({ path: "/order/detail", query });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "~@/assets/css/query.scss";
.form {
  &-item {
    margin-bottom: 0.55556rem;
    ::v-deep {
      .van-field {
        flex: 1;
        margin: 0;
        border: $w1px solid #dfdfdf;
        background: #fcfcfc;
        border-radius: 0.13889rem;
        overflow: hidden;
        padding: 0.2rem;
        input {
          font-size: 0.333333rem;
        }
      }
    }
  }
}
</style>
